pagePiling.js – jQuery全屏滚动插件 |
您所在的位置：网站首页 › jquery div滚动条 › pagePiling.js – jQuery全屏滚动插件 |
|
查看演示 简介pagePiling.js 的主要特点是滚动方式，它把所有“页面”叠在一起，使用 translate3d “抽”动页面，产生了一种类似“视觉差”的效果。 使用方法1、引入文件 2、HTML 第一屏 第二屏 第三屏 第四屏 3、JavaScript$(function(){ $('#dowebok').pagepiling(); });配置1、选项属性/方法类型默认值说明menu字符串null绑定菜单direction字符串vertical滚动方向，可选 vertical（垂直/竖向） 或 horizontal（水平/横向）verticalCentered布尔值true内容垂直居中sectionsColor数组[]“每一屏”的背景颜色anchors数组[]锚链接名称scrollingSpeed整数700动画时间easing字符串swing动画方式loopBottom布尔值false滚动到底部后循环滚动loopTop布尔值false滚动到顶部后循环滚动css3布尔值true使用 css3 动画，如果浏览器不支持，则自动推到 js 动画navigation对象定义导航文字颜色、背景颜色、位置和 tooltipnormalScrollElements字符串null避免在某些元素上自动滚动，如地图，有滚动条的 div 等normalScrollElementTouchThreshold整数5设定一个阈值，以便在移动设备上滑动定义了 normalScrollElements 的元素touchSensitivity整数5触摸灵敏度keyboardScrolling布尔值true使用键盘控制sectionSelector字符串.section每一屏的选择器animateAnchor布尔值false是否以动画的方式滚动到某一个锚链接afterRender页面初始化后的回调函数onLeave滚动前的回调函数function(index, nextIndex, direction){}afterLoad滚动后的回调函数function(anchorLink, index){}2、自定义方法名称说明moveSectionUp()向上滚动，使用方法：$.fn.pagepiling.moveSectionUp();moveSectionDown()向下滚动，使用方法：$.fn.pagepiling.moveSectionDown();moveTo(section)滚动到某一屏，使用方法：$.fn.pagepiling.moveTo(3);或者：$.fn.pagepiling.moveTo(‘page3’);setAllowScrolling(boolean)允许/禁止滚动，使用方法：$.fn.pagepiling.setAllowScrolling(false);setKeyboardScrolling(boolean)启用/禁止键盘控制，使用方法：$.fn.pagepiling.setKeyboardScrolling(false);setScrollingSpeed(milliseconds)设置动画时间，使用方法：$.fn.pagepiling.setScrollingSpeed(800);GitHub 地址：https://github.com/alvarotrigo/pagePiling.js 加入收藏本站部分内容来源于网络，版权属于原作者所有，本站文章只用于个人学习使用；如有侵犯联系站长删除！谢谢。 发布者：大山，转载请注明出处：https://web-note.cn/article/chajian/366.html |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |